<script setup lang="ts">
  import { NIcon } from 'naive-ui'
  import { ChevronLeftSharp } from '@vicons/material'
  import { useRouter } from 'vue-router'
  const router = useRouter()
  const props = defineProps<{
    title: string
    backPath?: string
  }>()
  const handleBack = async () => {
    if (props.backPath) {
      await router.push(props.backPath)
    } else {
      router.back()
    }
  }
</script>

<template>
  <div class="h-[58px] bg-white rounded flex items-center px-5 justify-between">
    <div class="flex items-center">
      <div
        class="pingfang flex text-[#0B5CFF] border border-[#0B5CFF] rounded hover:text-[#0B5CFFCC] items-center px-3 cursor-pointer h-8 leading-8"
        @click="handleBack"
      >
        <n-icon>
          <ChevronLeftSharp />
        </n-icon>
        <div class="font-medium ml-1">返回</div>
      </div>
      <div class="ml-4 font-bold text-[20px]">{{ props.title }}</div>
    </div>
    <div>
      <slot name="right" />
    </div>
  </div>
</template>
